<template>
    <div class="container" v-loading="loading">
        <header-nav/>
        <div class="add-header">
            <h3>添加文章</h3>
        </div>
        <div class="add-container">
            <el-form :label-position="labelPosition" :model="articleForm">
                <el-form-item>
                    <h6>文章标题</h6>
                    <el-input v-model="articleForm.title"></el-input>
                </el-form-item>
                <el-form-item>
                    <h6>文章简述</h6>
                    <el-input v-model="articleForm.desc"></el-input>
                </el-form-item>
                <el-form-item>
                    <h6>文章正文</h6>
                    <quill-editor ref="myTextEditor"
                                  v-model=articleForm.contents
                                  :config="editorOption"
                                  @change="onEditorChange($event)">
                    </quill-editor>
                </el-form-item>
                <el-form-item class="submit-btn">
                    <el-button type="success" @click="add">提交</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    import HeaderNav from '@/components/HeaderNavbar'
    import axios from 'axios'

    export default {
        name: "Add",
        components: {
            HeaderNav
        },
        data() {
            return {
                loading: false,
                editorOption: {
                    theme: 'snow'
                },
                txt: '',
                labelPosition: 'left',
                articleForm: {
                    'title': '',
                    'desc': '',
                    'contents': '<h3>hello my friend</h3>'
                }

            }
        },
        methods: {
            onEditorChange({editor, html, text}) {
                this.articleForm.contents = html;
            },
            add() {
                axios({
                    url: 'api/add',
                    method: 'post',
                    data: {
                        'title': this.articleForm.title,
                        'desc': this.articleForm.desc,
                        'contents': this.articleForm.contents
                    }
                    })
                    .then(this.addArticleSucc)
                    .catch(err => {
                        console.log(err);
                    })
            },
            addArticleSucc(res) {
                const loading = this.$loading({
                    lock: true,
                    text: '正在提交...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                setTimeout(() => {
                    loading.close();
                    this.$notify({
                        title: '成功',
                        message: '添加文章成功',
                        type: 'success'
                    });
                    this.$router.push('/');
                }, 700);
                console.log()
            }
        },
        computed: {
            editor() {
                return this.$refs.myTextEditor.quillEditor
            }
        },
        mounted() {
        }
    }
</script>

<style lang="stylus" scoped>
    @import '~@/assets/styles/css/variable.styl'
    .add-container >>> .el-form-item__content
        line-height: 20px;

    .add-container >>> .el-form-item__content .el-button--success
        background-color: $themeColor;
        border-color: $themeColor;

    .add-header
        padding: $commonPadding
        h3
            padding-left: 10px;
            border-left: 3px solid $themeColor;

    .add-container
        padding: $commonPadding
        .el-form-item h6
            margin: 0;
            color: #666;
            padding-bottom: 10px;
            font-weight: 400;
</style>